<template>
  <div>
    <!-- Floating Loader -->

    <div class="loader"></div>
    <div class="shadow"></div>

    <!-- Like what you see? why not visit my website for more awesome work -->

    <div class="logo">
      <a href="https://mariodesigns.co.uk/" target="_blank"><img :src="logo" alt="乘凉" /></a>
    </div>
  </div>
</template>

<script setup>
import logo from '@/assets/img/logo.png'
</script>

<style scoped lang="scss">
@keyframes mainAnimation {
  0% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    width: 50px;
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  40% {
    width: 150px;
    transform: translateX(-50px) translateY(0px) rotate(0deg);
  }
  60% {
    width: 150px;
    transform-origin: bottom right;
    transform: translateX(-150px) translateY(0px) rotate(90deg);
  }
  80% {
    width: 50px;
    transform: translateX(-25px) translateY(0px) rotate(90deg);
  }
  100% {
    width: 50px;
    transform: translateX(-50px) translateY(0px) rotate(90deg);
  }
}
@keyframes secundaryAnimation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  20% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  40% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
  60% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  80% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(180deg);
  }
}
@keyframes shadowAnimation {
  0% {
    width: 150px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
  20% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  40% {
    width: 200px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
  60% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  80% {
    width: 75px;
    transform: translateX(37.5px) translateY(0px) rotate(0deg);
  }
  100% {
    width: 150px;
    transform: translateX(-25px) translateY(0px) rotate(0deg);
  }
}
@keyframes float {
  0% {
    top: 50%;
  }
  50% {
    top: 51%;
  }
  100% {
    top: 50%;
  }
}

html,
body {
  height: 100%;
}
body {
  position: relative;
  background: rgb(153, 210, 228);
  background: linear-gradient(135deg, rgb(153, 210, 228) 0%, rgb(255, 212, 218) 100%);
}

.loader {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  background-color: #fff5a5;
  transform: translateX(0px) translateY(0px) rotate(0deg);
  animation: mainAnimation 2.6s ease 0s infinite forwards;
  z-index: 2;
  &:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: -50px;
    background-color: #fff5a5;
    transform-origin: top right;
    transform: translateX(0px) translateY(0px) rotate(0deg);
    animation: secundaryAnimation 2.6s ease 0s infinite forwards;
  }
}

.shadow {
  position: absolute;
  width: 100px;
  height: 10px;
  top: 50%;
  left: 50%;
  margin-top: 50px;
  margin-left: -75px;
  border-radius: 50%;
  background-color: #95a5a6;
  transform: translateX(0px) translateY(0px) rotate(0deg);
  animation:
    shadowAnimation 2.6s ease 0s infinite forwards,
    float 5s ease-in-out 0s infinite forwards;
  filter: blur(5px);
  z-index: 1;
}

.logo {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 42px;
  height: 42px;
  padding: 12px 5px;
  margin-left: -21px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 50%;
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  &:hover {
    transform: scale(1.4);
  }
  img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}
</style>
